<!--
 * @Author: your name
 * @Date: 2021-04-18 19:14:47
 * @LastEditTime: 2021-04-18 21:30:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \w1811-a-wang-xiaotong\day1\myapp\src\views\Remove\index.vue
-->
<template>
    <div class="remove">
        <div class="head">
            <p @click="all">全选</p>
            <h4>选择书籍</h4>
            <p @click="cancel">取消</p>
        </div>
        <div class="body">
            <div v-for="(item,index) in list" @click="btn(item.id)" :key="index">
                <img :src="item.img" alt="">
                {{item.title}}
                <div class="blue" :id="item.flag?'active':''"></div>
            </div>
            <div class="mask">
                <div>
                    <h4>书籍分组</h4>
                    <p>新建分组</p>
                    <p>取消</p>
                </div>
            </div>
        </div>
        <div @click="okey">确定</div>
    </div>
</template>
<script>
import axios from "axios";
export default {
    created(){
        axios.post("/api/list").then(res=>{
            this.list=res.data.list.list;
        })
    },
    data(){
        return {
            list:[],
            id:"",
        }
    },
    methods:{
        btn(id){
            let item = this.list.find(i=>i.id===id);
            if(item.flag){
                item.flag=false;
            }
            else{
                item.flag=true;
            }
        },
        all(){
            this.list.forEach(i=>{
                i.flag=true;
            })
        },
        cancel(){
            this.list.forEach(i=>{
                i.flag=false;
            })
        },
        okey(){
            
        }
    }
}
</script>
<style lang="scss">
.remove{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.body{
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}
.body>div{
    width: 30%;
    height: auto;
    position: relative;
}
.head{
    width: 100%;
    height: auto;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.head p{
    color: #ccc;
}
.blue{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: skyblue;
    position: absolute;
    right: 0px;
    bottom: 10px;
    display: none;
}
#active{
    display: block;
}
.mask{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}
</style>